<template>
  <div id="time-report-result">
    <div class="title">Time Report</div>
    <div class="content">
      <div class="type-select">
        <button v-touch-ripple class="type-button" :class="{active:approveStatus==0}" type="button" @click="approveStatus=0">Unapproved</button>
        <button v-touch-ripple class="type-button" :class="{active:approveStatus==1}" type="button" @click="approveStatus=1">Approved</button>
        <button v-touch-ripple class="type-button" :class="{active:approveStatus==2}" type="button" @click="approveStatus=2">All</button>
      </div>
      <div class="table-content">
        <div class="top-handle">
          <Select class="date-select" size="small">
            <option>2/12 - 2/18/2017</option>
          </Select>
          <button v-if="approveStatus == 1" class="handle-button" @click="unApproveSelected">UnApprove Selected Users</button>
          <button v-else class="handle-button"   @click="approveSelected">Approve Selected Users</button>
        </div>
        <i-table class="table-panel" :columns="tableColumns" :data = 'tableData' @on-selection-change="tableSelectedChange"></i-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TimeReportResult',
  components:{

  },
  created(){
  	this.startDate = this.$route.query.startDate;
  	this.endDate = this.$route.query.endDate;
  	this.approveStatus = 2;
  },
  watch:{
    approveStatus(){
      this.$store.dispatch('getTimeReportList',{
        startDate:this.startDate,
        endDate:this.endDate,
        approveStatus :this.approveStatus
      })
    },
    approveParam(value){
      this.$store.dispatch('approveTimeReport',value).then(
        (data) =>{
          this.$Message.success(data.message);
          this.$store.dispatch('getTimeReportList',{
            startDate:this.startDate,
            endDate:this.endDate,
            approveStatus :this.approveStatus
          })
        }
      )
    },
    unApproveParam(value){
      this.$store.dispatch('unApproveTimeReport',value).then(
        (data) =>{
          this.$Message.success(data.message);
          this.$store.dispatch('getTimeReportList',{
            startDate:this.startDate,
            endDate:this.endDate,
            approveStatus :this.approveStatus
          })
        }
      )
    }
  },
  computed:{
    tableData(){
        return this.$store.getters.timeReportList;
    }
  },
  data () {
    return {
      beginDate:'',
      endDate:'',
      approveStatus:'',
      selection:[],
      approveParam:{},
      unApproveParam:{},
      tableColumns:[
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
        	key:'employeeName',
          title:'Name'
        },
        {
        	key:'lastApprovedDate',
          title:'approved'
        },
        {
        	key:'total',
          title:"Total hours",
          className:'hour-column',
          render:function (row,column,index) {
            return row['totalHours'] + ' ' + row['totalHoursUnit'];
          }
        },
        {
          key:'overtime',
          title:"Overtime",
          className:'hour-column',
          render:function (row,column,index) {
            return row['overtime'] + ' ' + row['overtimeUnit'];
          }
        },
        {
          key:'doubleTime',
          title:"Doubletime",
          className:'hour-column',
          render:function (row,column,index) {
            return row['doubletime'] + ' ' + row['doubletimeUnit'];
          }
        },
        {
          key:' ',
          title:" ",
          className:'view-detail-column',
          render:function (row,column,index) {
            return `<a  @click="goToDetail(${row.employeeId})" class="view-detail-link">view Detail</a>`
          }
        },
        {
          key:' ',
          title:" ",
          className:'approve-column',
          render:function (row,column,index) {
          	if(typeof row.approveStatus == 'undefined'){
          		return;
            }
          	if(row.approveStatus == 0){
              return `<button class="approve-btn" @click="approve(${row.employeeId},${row.lastApprovedDate})">Approve</button>`;
            }else{
              return `<button class="unApprove-btn" @click="unApprove(${row.employeeId},${row.lastApprovedDate})">UnApprove</button>`;
            }
          }
        }
      ]
    }
  },
  methods:{
    tableSelectedChange(selection){
      this.selection = selection;
    },
    goToDetail(id){
    	this.$router.push('/views/time/report/result/'+id);
    },
    approve(employeeId,date){
      this.approveParam ={
          employeeIds:employeeId,
          approveDate:moment(this.endDate).format('YYYY-MM-DD')
      };
    },
    unApprove(employeeId,date){
      this.unApproveParam ={
        employeeIds:employeeId,
        approveDate:moment(this.startDate).format('YYYY-MM-DD')
      };
    },
    approveSelected(){
      var selection = this.selection;
      if(!selection.length){
          this.$Message.warning('please select !');
          return;
      }
      var approveParam = {
        employeeIds:[],
        approveDate:this.endDate,
      };
      for(var i=0;i<selection.length;i++){
        approveParam.employeeIds.push(selection[i].employeeId);
      }
      this.approveParam = {
        employeeIds:approveParam.employeeIds.join(),
        approveDate:this.endDate,
      }
    },
    unApproveSelected(){
      var selection = this.selection;
      if(!selection.length){
        this.$Message.warning('please select !');
        return;
      }
      var unApproveParam = {
        employeeIds:[],
        approveDate:this.startDate,
      };
      for(var i=0;i<selection.length;i++){
        unApproveParam.employeeIds.push(selection[i].employeeId);
      }
      this.unApproveParam = {
        employeeIds:unApproveParam.employeeIds.join(),
        approveDate:this.startDate,
      }
    }
  }
}
</script>


<style  rel="stylesheet/scss" type="text/css" lang="scss"  >
  @import "src/assets/css/variable";
  #time-report-result{
    .title{

    }
    .content{
      margin-top: 60px;
      box-shadow: 0 1px 8px 1px rgba(184, 198, 239, 0.8);
      .type-select{
        margin-top: -77px;
        margin-left: -20px;
        .type-button{
          width: 160px;
          height: 54px;
          margin-right: 10px;
          background-color: #ebf3f7;
          color: #96ACB9;
          border:none;
          border-radius: 3px 3px 0 0;
          outline: none;
          cursor: pointer;
          &.active , &:hover{
            height: 57px;
            background-color: #fff;
            box-shadow: 0 -6px 8px 0 rgba(184,198,239,0.80);
          }
        }
      },
      .table-content{
        padding-top: 20px;
        .top-handle{
          height: 34px;
          line-height: 34px;
          margin-bottom: 22px;
          .date-select{
            width: 128px;
            height: 28px;
          }
          .handle-button{
            width: 180px;
            height: 34px;
            float: right;
            line-height: 34px;
           /* font-family: PingFangTC-Regular;*/
            font-size: 12px;
            color: #FFFFFF;
            background: $baseColor;
            border-radius: 2px;
            outline: none;
            border: none;
            color: #fff;
            cursor: pointer;
            &:hover{
              opacity: .7;
            }
          }
        }
        .table-panel{
          .ivu-table-tbody{
            .view-detail-column{
              .view-detail-link{
                font-size: 14px;
                color: $baseColor;
                text-decoration: underline;
              }
            }
            .hour-column{
              .ivu-table-cell{
                color: #38709b;
                font-weight: 500;
              }
            }
            .approve-column{
              button{
                width: 100px;
                height: 30px;

                color: #fff;
                border:0;
                outline: 0;
                vertical-align: middle;
                border-radius: 4px;
                cursor: pointer;
                &:hover{
                  opacity: .7;
                }
                &.approve-btn{
                  background-color: $baseColor;
                }
                &.unApprove-btn{
                  background-color: #EE6723;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
